#{extends 'main.html' /}
#{set title:'Transat | Inscription' /}
#{set 'moreStyles'}#{stylesheet 'utilisateur.css' /}#{/set}

<h1 class="inscription_title">Inscrivez-vous sur Transat.com</h1>
<h2 class="inscription_subtitle">Commencez à naviguer dans le monde !</h2>

<div id="inscription_errors">
	#{ifErrors}
		<div class="inscription_notification">Il y a des erreurs dans le formulaire</div>
		<ul class="inscription error">
			#{list errors, as:'erreur'}
				<li>${erreur}</li>
			#{/list}
		</ul>
	#{/ifErrors}
	
	#{if message}
		<div class="inscription_notification">Il y a des erreurs dans le formulaire</div>
		<ul class="inscription error">
			<li>${message}</li>
		</ul>
	#{/if}
</div>


#{form @Utilisateurs.inscriptionAction()}
<div id="inscription_form">
	<div id="inscription_part_utilisateur">
		<div class="inscription_field">
			<label>Pseudo</label>
			<input type="text" name="pseudo" value="${pseudo}"/>
		</div>
	
		<div class="inscription_field">
			<label>Mot de passe</label>
			<input type="password" name="motDePasse"/>
		</div>

		<div class="inscription_field confirm">
			<label>Confirmer mot de passe</label>
			<input type="password" name="confirmMotDePasse"/>
		</div>		
			
		<div class="inscription_field">
			<label>Email</label>
			<input type="text" name="email" value="${email}"/>
		</div>
	</div>
	
	<div id="inscription_part_bateau">
		<div class="inscription_field">
			<label>Nom du bateau</label>
			<input type="text" name="nomBateau" value="${nomBateau}"/>
		</div>	
				
		<div class="inscription_field">
			<label>Couleur du bateau</label>
			<select name="couleur_id">
			#{list couleurs, as:'couleur'}
				<option value="${couleur.id}" style="color:${couleur.code_couleur};">${couleur.libelle_couleur}</option>
			#{/list}
			</select>
		</div>		
	</div>
	
	
	<div class="inscription_field">
		<label></label>
		<input type="submit" value="S'inscrire"></input>
	</div>	

	
</div>
#{/form}
